<template>
  <DialogBox
    :visible="boxVisibility"
    @update:visible="boxVisibility = $event"
    resize
    max-height="600"
    title="运营确认上传作品"
    width="40%"
    :close-on-click-modal="false"
  >
    <Form ref="ruleFormRef" label-width="120px" :model="createData" :rules="rules">
      <FormItem label="工单名称" prop="order_name">
        <Input v-model="createData.order_name" disabled></Input>
      </FormItem>
      <FormItem label="作品上传时间" prop="work_upload_time">
        <DatePicker v-model="createData.work_upload_time" placeholder="请选择日期" value-format="yyyy-MM-dd"></DatePicker>
      </FormItem>
      <FormItem label="作品上传链接" prop="work_upload_link">
        <Input v-model="createData.work_upload_link"></Input>
      </FormItem>
      <FormItem label="备注">
        <Input type="textarea" v-model="createData.work_upload_remak"></Input>
      </FormItem>
    </Form>
    <template #footer>
      <Button type="primary" @click="submitClick"> 确定 </Button>
      <Button type="primary" @click="boxVisibility = false"> 取消 </Button>
    </template>
  </DialogBox>
</template>

<script setup>
import { ref } from 'vue'
import { Button, DialogBox, Form, FormItem, Input, DatePicker, Modal } from '@opentiny/vue'
import { getRetouchOrder } from '@/request/api'
const  props = defineProps({
  basicGridRef: Object
})
const boxVisibility = ref(false)
const createData = ref({
  order_name: '',
  work_upload_time: '',
  work_upload_remak: '',
  work_upload_link: ''
})
const ruleFormRef = ref()
const curRow = ref({})
const rules = ref(
  {
    order_name: [
      { required: true, message: '必填', trigger: 'change' },
    ],
    work_upload_time: [
      { required: true, message: '必填', trigger: 'change' },
    ],
    work_upload_link: [
      { required: true, message: '必填', trigger: 'change' },
    ],
    work_upload_remak: [
      { required: true, message: '必填', trigger: 'change' },
    ]
  }
)

const open = (row) => {
  curRow.value = row 
  boxVisibility.value = true
  createData.value.order_name = row.order_name
  createData.value.work_upload_link = row.work_upload_link
  createData.value.work_upload_time = row.work_upload_time
  createData.value.work_upload_remak = row.work_upload_remak
}

const submitClick = () => {
  ruleFormRef.value.validate(val => {
    if (val) {
      const formData = new FormData()
      formData.append('flag', 4)
      formData.append('order_id', curRow.value.order_id)
      formData.append('work_upload_time', createData.value.work_upload_time)
      formData.append('work_upload_link',  createData.value.work_upload_link)
      formData.append('work_upload_remak',  createData.value.work_upload_remak)
      getRetouchOrder(formData, 'put').then(res => {
        if (res?.data?.ret === 0) {
          props.basicGridRef.handleFetch()
          boxVisibility.value = false
          Modal.message('运营确认上传作品')
        } else {
          Modal.message({ message: res.data.msg, status: 'error' })
        }
      })
    }
  })
}

defineExpose({
  open
})
</script>